
<template>
   <div class="top">
      <div class="choose">
                 <span>
                  描述：<input type="text" class="search_child" placeholder="如:管理员/描述" v-model="searchValue"></span>
             <span>
                  时间：<input type="date" class="search_child" v-model="logPage.dateTime"></span>
            <span  class="search_click" @click="search_">搜索</span>
      </div>

      <div class="t_right_">
         类型:
         <label @click.stop="condition_(null)">
            <input name="statue" :checked="this.logPage.types === null" type="radio" >全部
         </label>
         <label @click.stop="condition_(1)">
            <input name="statue" :checked="this.logPage.types === 1" type="radio">新增
         </label>
         <label @click.stop="condition_(-1)">
            <input name="statue" :checked="this.logPage.types === -1" type="radio">删除
         </label>
         <label @click.stop="condition_(0)">
            <input name="statue" :checked="this.logPage.types === 0" type="radio">修改
         </label>
      </div>
   </div>


   <div class="bottom">
      <table cellpadding="0" cellspacing="0" >
         <thead>
         <tr>
            <th>序号</th>
            <th>IP</th>
            <th>归属地</th>
            <th>管理员</th>
            <th>描述</th>
            <th>时间</th>
            <th>结果</th>
            <th style="min-width: 100px">操作对象</th>
            <th>类型</th>
            <th>操作</th>
         </tr>
         </thead>
         <tbody>
         <tr v-for="(item,index) in fuzzyQueries" v-if="fuzzyQueries.length>0">
            <td style="width: 50px">{{ total.current > 1 ? (index+1)+14*(total.current-1) : index+1}}</td>
            <td style="width: 100px"  v-html="highlight_(item.ip)"></td>
            <td style="width: 100px"  v-html="highlight_(item.address)"></td>
            <td style="width: 100px"  v-html="highlight_(item.admin)"></td>
            <td  class="overflow" v-html="highlight_(item.content)"></td>
            <td style="width:200px " v-html="highlight_(item.time)"></td>
            <td style="width: 100px">
               <span class="button_style"
                     :style="{'background': item.outcome === 1 ? '#32CD32':'#DC143C' }">
                            {{ item.outcome === 1 ? '成功': '失败' }}
               </span>
            </td>
            <td style="width:200px "  class="overflow" v-html="highlight_(item.user)"></td>
            <td style="width: 100px">
                <span class="button_style"
                      :style="{'background': item.type === 1 ? '#32CD32': item.type === 0 ? '#efcb04':'#DC143C' }">
                    {{ item.type === 1 ? '新增': item.type === 0 ? '修改':'删除' }}
                </span>
            </td>
            <td style="width: 100px">
               <span class="edit" @click="edit_userInfo(item.id,index)">删除</span>
            </td>
         </tr>
         <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
            <LoadTheAnimation ></LoadTheAnimation>
         </tr>
         <tr v-show="!load_">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td><h2>未查询到任何数据</h2></td>
            <td></td>
            <td></td>
            <td></td>
         </tr>
         </tbody>
      </table>
   </div>
   <div class="bottom_">
      <span style="margin-right:10px">共{{total.page}}页, 共{{total.sum}}条数据 当前第{{total.current}}页</span>
      <span class="jian"  @click="left_">
           <img src="../../../public/static/jian_r.png" alt="">
       </span>
      <input type="text" class="limit" v-model="total.current"   @focusout="limit_">
      <span class="jian" @click="right_">
           <img src="../../../public/static/jian_l.png" alt="" >
       </span>
      <select @change ="page_($event)" class="page_index">
         <option  v-for="(item,index) in 3" >{{(index+1)*10+4}}/条</option>
      </select>
   </div>
   <PromptWindow v-show="box_confirm" @confirm="confirm" :info="info" :index="index"></PromptWindow>
</template>

<script>
import api from "@/api";
import PromptWindow from "@/components/publicCommon/PromptWindow.vue";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";
import PromptInformation from "@/components/publicCommon/PromptInformation.vue";

export default {
   name: "operationalLogs",
   components: {PromptInformation, LoadTheAnimation, PromptWindow},
   data(){
      return{
         select:false,
         searchValue:"",
         fuzzyQueries:[],
         logPage:{
            index:1,
            condition:null,
            types:null,
            page:14,
            dateTime:null,
         },
         total:{
            sum:'',
            page:'',
            size:'',
            current:'',
         },
         info:"",
         box_confirm:false,
         index:0,
         del_info:false,
         load_:true,
      }
   },
   mounted() {
      this.request_(this.logPage);
   },
   watch:{
      'logPage.page'(newValue,oldValue){
         this.logPage.page = newValue;
         this.request_(this.logPage);
      },
      'logPage.dateTime'(newValue,oldValue){
         if(newValue == "") {
            this.logPage.dateTime = null
            this.request_(this.logPage);
         }
      },
      del_info(newValue,oldValue){
         if(newValue){
            api.deleteLogs(this.info).then((res)=>{
               if(res.data.code === 200){
                  this.$store.commit("requestInfo", "删除成功");
                  this.request_info = "";
                  this.request_(this.logPage);
               }else {
                  this.$store.commit("requestInfo", "失败");
               }
            })
            this.info = "";
            this.del_info = false;
         }
      },
      'total.current'(newVal, oldVal){
         let reg = /^\+?[1-9]\d*$/;
         if(reg.test(newVal)){
            this.logPage.index = newVal;
         }
         if(newVal > this.total.page){
            this.logPage.index = 1;
         }

      },
      searchValue(newValue,oldValue){
         if(newValue === ""){
            this.logPage.condition = null;
            this.request_(this.logPage);
         }else{
            this.logPage.condition =  newValue
         }

      },
   },
   methods:{
      page_(event){
         this.logPage.page = parseInt(event.target.value);
      },
      confirm(index,bool){
         this.box_confirm = false;
         if(bool){
            this.del_info  = true;
            this.fuzzyQueries.splice(index, 1);
            this.$forceUpdate();
         }
      },
      edit_userInfo(info,index){
         this.info = info;
         this.index = index;
         this.box_confirm = true;
      },
      search_(){
         this.request_(this.logPage);
      },
      condition_(type){
         this.logPage.index = 1;
         this.logPage.types = type;
         this.request_(this.logPage);
      },
      limit_(){
         this.request_(this.logPage);
      },
      request_(logPage){
         api.getAllLogs(logPage).then((res)=>{
            this.fuzzyQueries = res.data.data.records;
            this.total.sum = res.data.data.total;
            this.total.page = res.data.data.pages;
            this.total.current = res.data.data.current;
            this.total.size = res.data.data.size;
            if(this.fuzzyQueries.length===0){
               setTimeout(()=>{
                  this.load_ = false;
               },1000)
            }else {
               this.load_ = true;
            }
         })
      },
      highlight_(text) {
         text = text + "";
         if (this.searchValue !== "")
            return text.replace(this.searchValue, '<span style="background: #f6f604;">' + this.searchValue + '</span>')
         else return text
      },
      left_(){
         this.logPage.index-=1;
         if( this.logPage.index<1){
            this.logPage.index=1;
            this.$store.commit("requestInfo", "已是第一页");
            return;
         }
         this.request_( this.logPage);
      },
      right_(){
         this.logPage.index+=1;
         if( this.logPage.index> this.total.page){
            this.logPage.index = this.total.page;
            this.$store.commit("requestInfo", "已是最后一页");
            return;
         }
         this.request_( this.logPage);
      }
   }
}
</script>

<style scoped>

td{
   max-width: 200px !important;
   height: 45px !important;
   animation: tr_ 0.5s ease-in-out 0s 1 forwards;
}
@keyframes tr_ {
   0%{
      transform: scaleY(0%);
   }100%{
       transform: scaleY(100%);
    }
}

tr:nth-child(2n){
   background: rgba(206, 202, 202, 0.5);
}
.edit{
   padding: 6px 10px;
   background: #6da6e1;
   border-radius: 3px;
   margin:0 5px;
   color: white;
   cursor: pointer;
   font-size: 14px;
}
.edit:hover{
   opacity: .9;
}
.search_child{
   height: 30px;
   padding:0 10px;
   outline:none;
}
.choose{
   margin-left: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.choose span{
   margin-right: 10px;
}
.search_click{
   display: inline-block;
   background: #057cf8;
   padding: 4px 7px;
   color: white;
   cursor: pointer;
}
.search_click:hover{
   opacity: .8;
}
.page_index{
   height: 26px;
   outline: none;
   padding: 0 7px;
   color: #4297ec;
   border: 1px solid #282828;
}
option{
   padding: 10px;
}
</style>